<!--
 * @Author: your name
 * @Date: 2021-12-30 09:25:55
 * @LastEditTime: 2022-01-06 14:34:35
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \am-ui\src\pages\am\monitor\PointInfo.vue
-->
<template>
  <div class="PointInfo">
    <div class="content">
      <div class="left">
        <el-input placeholder="请输入工程的关键字进行筛选"></el-input>
        <!-- 工程设备树 -->
        <el-tree
            
          :data="edTree"
          :props="props"
          @node-click="handleNodeClick"

        ></el-tree>
      </div>
      <div class="right" >
        <!-- 右侧信息 -->
        <div v-if="resdata.engineer" >
           
          <!-- 工程信息 -->
     
     
          <div class="engineer_content"><div class="gcxx">工程信息:<hr></div> 
            <el-form v-if="resdata.engineer" label-width="150px" >
            <el-row>
              <el-col :span="12">
              <el-form-item label="工程编号:" >
                 {{resdata.engineer.serial_number}}
              </el-form-item>
              </el-col>

              <el-col :span="12">
              <el-form-item label="工程名称:">
                  {{resdata.engineer.name}}
              </el-form-item>
              </el-col>
            </el-row>

             <el-row>
              <el-col :span="12">
              <el-form-item label="工程状态:" >
                <el-tag size="mini" type="warning">
                  {{resdata.engineer.status}}
                </el-tag>
              </el-form-item>
              </el-col>

              <el-col :span="12">
              <el-form-item label="工程类型:">
               {{resdata.engineer.type}}
              </el-form-item>
              </el-col>
            </el-row>

             <el-row>
              <el-col :span="12">
              <el-form-item label="开始时间:" >
                 <template >
                 <span v-if="resdata.engineer.begin_time == null">暂无</span>
                 <span v-else>{{resdata.engineer.begin_time  | fmtTime}}</span>
                 </template>
              </el-form-item>
              </el-col>

              <el-col :span="12">
              <el-form-item label="结束时间:">
                <template >
                 <span v-if="resdata.engineer.end_time == null">暂无</span>
                 <span v-else>{{resdata.engineer.end_time  | fmtTime}}</span>
                 </template>
              </el-form-item>
              </el-col>
            </el-row>

             <el-row>
              <el-col :span="12">
              <el-form-item  label="工程地址:" >
                  {{resdata.engineer.address}}
              </el-form-item>
              </el-col>

              <el-col :span="12">
              <el-form-item label="负责人ID:">
                  {{resdata.engineer.charge_id}}
              </el-form-item>
              </el-col>
            </el-row>
          
            </el-form>
          </div>
          <br>
          <br>
          <br>
      
           
         <!-- 设备信息 -->
          <div class="device_content"> <div class="sbxx">设备信息:<hr></div> 
            
            <el-form  label-width="150px" >
            <el-row>
              <el-col :span="12">
              <el-form-item label="设备编号:" >
                 {{resdata.serial_number}}
              </el-form-item>
              </el-col>

              <el-col :span="12">
              <el-form-item label="设备名称:">
                  {{resdata.name}}
              </el-form-item>
              </el-col>
            </el-row>
             <el-row>
              <el-col :span="12">
              <el-form-item label="绑定状态:" >
                <template>
                  <el-tag
                    size="mini"
                    v-if="resdata.bind_status == 1"
                    type="success"
                    >已绑定</el-tag
                  >
                  <el-tag size="mini" v-else type="danger">未绑定</el-tag>
                </template>
                 <!-- {{resdata.bind_status}} -->
              </el-form-item>
              </el-col>

              <el-col :span="12">
              <el-form-item label="在线状态:">
             <template>
              <el-tag
                size="mini"
                v-if="resdata.online_status== 1"
                type="success"
                >在线</el-tag
              >
              <el-tag size="mini" v-else type="danger">离线</el-tag>
            </template>
                  
              </el-form-item>
              </el-col>
            </el-row>
  
            </el-form>
          </div>
        </div>
        <div v-else class="notice">
          请先选择工程下的设备进行查看
        </div>
     </div>
     </div>
  </div>
</template>

<script>
import { get } from "@/utils/request.js";
export default {
  data() {
    return {
      edTree: [],
      resdata :{},
      props: {
        label: "name",
        value: "id",
      },
      
   };
   
  },
  methods: {
    
    // 树形节点点击事件
    handleNodeClick(data) {
      // 判断用户点击的是否是设备，点击工程时不查询数据
      if (data.engineer_id) {
        // 调用请求数据的方法
        this.findEngineerDevice(data.id);
      }
    },
    // 查询工程设备树
    findEngineerDeviceTree() {
      get("/engineer/findEngineerDeviceTree").then((res) => {
        this.edTree = res.data;
      });
    },
    // 查询当前检测点设备数据
    findEngineerDevice(id){
      get("/device/findDeviceDetail", {id}).then((res) => {
        this.resdata = res.data;  
      });
      
    },
    
  },
  created() {
    // 查询工程设备树
    this.findEngineerDeviceTree();
  },
};
</script>
<style scoped>
.content {
  display: flex;
}
.left {
  width: 30%;
  border-right: 1px solid #b9b7b7;
  padding-right: 20px;
  margin-right: 20px;
}
.right {
  width: 70%;
}
.notice {
  height: 500px;
  line-height: 500px;
  text-align: center;
  font-size: 30px;
  color: #999;
}
  .transition-box {
    margin-bottom: 10px;
    width: 200px;
    height: 100px;
    border-radius: 4px;
    background-color: #409EFF;
    text-align: center;
    color: #fff;
    padding: 40px 20px;
    box-sizing: border-box;
    margin-right: 20px;
  }
  .engineer_content{
    background-color: rgb(253, 251, 243);
    border-radius: 15px;
    box-shadow: 9px 9px 17px 2px #cccccccf;
  }
  .device_content{
    background-color: rgb(253, 251, 243);
    border-radius: 15px;
    box-shadow: 9px 9px 17px 2px #cccccccf;
  }
  .gcxx{
    background-color: #ccc;
    font-size: 25px;
    font-weight: 550;
  }
  .sbxx{
    background-color: #ccc;
    font-size: 25px;
    font-weight: 550;
  }

</style>